<template>
  <div class="record pt20 pb20">
    <div v-for="item in record" :key="item.id" class="record-item row fcs rel">
      <div class="record-time fz12 c666 mr30">
        {{ item.create_time }}
      </div>
      <div class="record-circle mr30" />
      <div class="record-user fz14 mr30">
        {{ item.realname }}
      </div>
      <div class="record-content fz12">
        <p v-for="(text, index) in item.content" :key="index" class="p">{{ text }}</p>
      </div>
      <div class="record-line" />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Record',
    props: {
      record: {
        type: Array,
        default: () => []
      }
    }
  };
</script>

<style scoped lang="scss">
  .record {
    overflow-y: auto;
    height: 620px;
    .record-item {
      align-items: stretch;
      line-height: 28px;
    }
    .record-time {
      width: 120px;
    }
    .record-circle {
      width: 14px;
      height: 14px;
      z-index: 2;
      border-radius: 9px;
      background-color: white;
      border: 5px solid #a5ecd7;
    }
    .record-content {
      // width: 640px;
          max-width: 800px;
      .p {
        margin: 0 0 10px;
        word-break: break-all;
      }
    }
    .record-line {
      position: absolute;
      width: 1px;
      top: 3px;
      left: 156px;
      bottom: -3px;
      z-index: 1;
      background: #e6e6e6;
    }
  }

</style>
